.header {
  background: url("../img/page3/title.png") center no-repeat;
}

.main-content {
  padding-top: 5px !important;

  .right-content {
    width: 496px;
    float: right;
  }

  .table-container {
    margin-bottom: 10px;

    &.left-content {
      float: left;
      width: 1360px;

      .vticker-container {
        width: 1360px;
        height: 915px;
        background: url("../img/page3/left.png");

        .vticker-body {
          height: 820px;
        }
      }
    }

    .title {
      width: 185px;
      height: 33px;
      line-height: 33px;
      font-size: 22px;
      margin-bottom: 10px;
      background: url("../img/page7/l-title.png");
    }

    .vticker-container {
      padding: 16px;

      &.top {
        width: 496px;
        height: 315px;
        overflow: hidden;
        background: url("../img/page3/top.png");
      }

      &.bottom {
        width: 496px;
        height: 535px;
        overflow: hidden;
        background: url("../img/page3/bottom.png");
      }

      .vticker-header {
        width: 100%;
        height: 55px;
        line-height: 55px;
        color: #00fcff;
        font-size: 20px;
        font-weight: bold;
        text-align: center;
        background: #0428b1;

        ul {
          width: 100%;
          display: flex;

          li {
            flex: 1;
            border: none !important;
          }
        }
      }

      .vticker-body {
        ul {
          >li {
            position: relative;
            height: 57px;
            line-height: 57px;
            display: flex;

            &::before {
              position: absolute;
              content: "";
              left: 14px;
              top: 24px;
              width: 9px;
              height: 9px;
              border-radius: 50%;
              background: #fff;
            }

            &.undeal {
              .status {
                color: red;
              }

              &::before {
                background: red;
              }
            }

            &.todo {
              .status {
                color: yellow;
              }

              &::before {
                background: yellow;
              }
            }

            &.even {
              background: #0428b1;
            }

            div {
              position: relative;
              flex: 1;
              text-align: center;
              height: 100%;
              font-size: 19px;
              border-right: none;

              &.status {
                color: #36d463;
              }
            }
          }
        }
      }
    }
  }
}

.collection-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;

  div {
    flex: 0 1 auto;
    width: 224px;
    height: 132px;
    background: url("../img/page3/bg.jpg") center/cover no-repeat;
    padding: 30px 36px;

    .name {
      color: #24bcef;
      font-size: 20px;
      font-weight: bold;
    }

    .num {
      margin-top: 12px;
      font-size: 40px;
    }
  }
}